<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">
    <style>
        .fu {
            padding: 50px;
            background-color: rgba(157, 157, 157, 0.847);
            display: flex;
            justify-content: space-around;
        }

        .layui-timeline {
            width: 300px;
            /* height: 300px; */
            background-color: white;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 10px;
        }

        .box {
            font-size: 20px;
            font-weight: 900;
            margin-bottom: 15px;
        }

        .layui-timeline-title {
            position: relative;
            top: -5px;
        }

        .layui-timeline-title div {
            color: gray;
        }

        /*  */
        #main {
            background-color: white;
            border-radius: 15px;
        }
    </style>
</head>

<body>
    <div class="fu">
        <div class="layui-timeline">
            <div class="box">通知公告</div>
            <div class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis layui-icon-email"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">公司员工守则
                        <div>2018-11-12</div>
                    </div>
                </div>
            </div>
            <div class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis layui-icon-email"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">关于交易手候费优惠政策的通知
                        <div>2018-10-19</div>
                    </div>
                </div>
            </div>
            <div class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis layui-icon-email"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">国庆节安排的通知<div>2018-10-01</div>
                    </div>
                </div>
            </div>
            <div class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis layui-icon-email"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">818促销日:全场满5000送500<div>2018-08-18</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="main" style="width: 600px;height:400px;"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        const names = [
            'Orange',
            'Tomato',
            'Apple',
            'Sakana',
            'Banana',
            'Iwashi',
            'Snappy Fish',
            'Lemon',
            'Pasta'
        ];
        const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
        const shuffle = (array) => {
            let currentIndex = array.length;
            let randomIndex = 0;
            while (currentIndex > 0) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex--;
                [array[currentIndex], array[randomIndex]] = [
                    array[randomIndex],
                    array[currentIndex]
                ];
            }
            return array;
        };
        const generateRankingData = () => {
            const map = new Map();
            const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
            for (const _ of years) {
                const shuffleArray = shuffle(defaultRanking);
                names.forEach((name, i) => {
                    map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
                });
            }
            return map;
        };
        const generateSeriesList = () => {
            const seriesList = [];
            const rankingMap = generateRankingData();
            rankingMap.forEach((data, name) => {
                const series = {
                    name,
                    symbolSize: 20,
                    type: 'line',
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    endLabel: {
                        show: true,
                        formatter: '{a}',
                        distance: 20
                    },
                    lineStyle: {
                        width: 4
                    },
                    data
                };
                seriesList.push(series);
            });
            return seriesList;
        };
        option = {
            title: {
                text: 'Bump Chart (Ranking)'
            },
            tooltip: {
                trigger: 'item'
            },
            grid: {
                left: 30,
                right: 110,
                bottom: 30,
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: true
                },
                axisLabel: {
                    margin: 30,
                    fontSize: 16
                },
                boundaryGap: false,
                data: years
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    margin: 30,
                    fontSize: 16,
                    formatter: '#{value}'
                },
                inverse: true,
                interval: 1,
                min: 1,
                max: names.length
            },
            series: generateSeriesList()
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>